<template>
    <div @click="$emit('click')">
      <van-cell :title='name' :label="author + ' ' + name" center class="van-cell-title">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #right-icon>
          <van-icon name="play-circle-o" class="play-circle-o-icon" @touchstart="playFn"/>
        </template>
      </van-cell>
    </div>
</template>
<script>
export default {
    props: {
        name: String,
        id: Number,
        author: String,

    },
    data() {
        return {

        }
    },
    methods: {
      playFn() {
        this.$router.push({
          path: '/play', query: {id: this.id},
        });
      },

    }
}
</script>

<style lang="less" scoped>
.play-circle-o-icon {
    font-size: 24px;
    line-height: inherit;
}

.van-cell-title {
    font-size: 17px;
}
</style>